<template>
  <div class="page inspectionApply-page" data-page="inspectionApply" style="z-index: 2;">
    <div class="link-page-nav">
        <a href="#" class="link" @click="$root.backToTab()">
            <i class="iconfont icon-zuo"></i>
        </a>
    </div>
    <div class="link-page-top" style="padding-bottom: 17px;">
        <div class="link-page-title">查岗记录</div>
    </div>
    <div class="page-content">
        <div class="inspectionApply-page-top">
            <div class="inspection-container" id="inspection-container"></div>
        </div>
        <div class="inspectionApply-page-bottom">
            <div class="inspection-time-title" id="inspectionTitle"></div>
            <div class="inspection-list timeline" id="inspectionList"> </div>
        </div>
    </div> 
    <div class="more-task-btn">
        <a href="/manualZhagang/" data-view=".view-main">
            <i class="iconfont icon-weibiaoti--"></i>
        </a>
    </div>  
  </div>
</template>

<script>
    return {
        data: function () {
            return {
                pageIndex: 0,//当前页数
                pageSize: 25,//一页包含数量
                startTime:moment().format("YYYY-MM-DD 00:00:00"),
                endTime:moment().format("YYYY-MM-DD 23:59:59"),
                searTime: moment().format("YYYY-MM-DD 00:00:00"),
            }
        },
        methods: {
            backToRefresh:function(){
                var self = this;
                self.createCalendar();
                self.getRecordData();
                self.getInspectRecords();
                $("#inspectionTitle").html(moment().format("YYYY-MM-DD")+"&nbsp;&nbsp;&nbsp;共查岗<span style='color:#397FCF;padding:0 8px;' id='inspectionTotal'>0</span>次");
            },
            createCalendar:function(){
                var self = this;
                $("#inspection-container").html('');
                var monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月' , '9月' , '10月', '11月', '12月'];
                var monthNums = ['01','02','03','04','05','06','07','08','09','10','11','12'];
                var calendarInline = app.calendar.create({
                    containerEl: '#inspection-container',
                    value: [new Date()],
                    weekHeader: false,
                    renderToolbar: function () {
                        return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
                        '<div class="toolbar-inner">' +
                            '<div class="left">' +
                            '<a href="#" class="link icon-only"><i class="icon icon-back ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
                            '</div>' +
                            '<div class="center"></div>' +
                            '<div class="right">' +
                            '<a href="#" class="link icon-only"><i class="icon icon-forward ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
                            '</div>' +
                        '</div>' +
                        '</div>';
                    },
                    on: {
                        init: function (c) {
                            $(".calendar-day-today").append(`<div class="icon-today"><i class="iconfont icon-jintian-"></i></div>`);
                            $('.calendar-custom-toolbar .center').text(c.currentYear + '年' + monthNames[c.currentMonth]);
                            $('.calendar-custom-toolbar .left .link').on('click', function () {
                                calendarInline.prevMonth();
                            });
                            $('.calendar-custom-toolbar .right .link').on('click', function () {
                                calendarInline.nextMonth();
                            });
                        },
                        monthYearChangeStart: function (c) {
                            $('.calendar-custom-toolbar .center').text(c.currentYear + '年' + monthNames[c.currentMonth]);
                            self.searTime = c.currentYear + "-" + monthNums[c.currentMonth] + "-01 00:00:00";
                            self.getInspectRecords();
                        },
                        calendarDayClick:function (c,value) {
                            var y = c.currentYear;
                            var m = c.params.monthNames[c.currentMonth];
                            var day = $(value).attr("data-day");
                            day = parseInt(day)>=10 ? day:'0'+day;
                            self.startTime = y + "-" + m +"-" + day + " 00:00:00";
                            self.endTime = y + "-" + m +"-" + day + " 23:59:59";
                            $("#inspectionTitle").html( y + "-" + m +"-" + day + "&nbsp;&nbsp;&nbsp;共查岗<span style='color:#397FCF;padding:0 8px;' id='inspectionTotal'>0</span>次");
                            self.getRecordData();
                        }
                    }
                });
            },

            // 查岗记录
            getRecordData: function () {
                var self = this;
                var html = "";
                $("#inspectionList").empty();
                Dao.getRecordList({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgIds: userInfor.organizationIds,
                    pageIndex: 0,
                    pageSize: 100,
                    startTime: self.startTime,
                    endTime:self.endTime,
                }, function (data,total) {
                    if (data&&data.length > 0){
                        $("#inspectionTotal").html(total);
                        html = "";
                        for (var i = 0; i < data.length; i++) {
                            html += `<div class="timeline-item all-inspect-list" id="every-inspect-list-`+data[i].id+`" data-id=`+data[i].id+`>
                                <div class="timeline-item-divider"></div>
                                <div class="timeline-item-content">
                                    <div class="timeline-item-title">`+data[i].initiateTime+`</div>
                                    <div class="timeline-item-subtitle">
                                        <div class="title">应答人数：`+data[i].onGuard+`</div>
                                    </div>
                                    <div class="timeline-item-subtitle">
                                        <div class="title">未应答人数：`+(data[i].total-data[i].onGuard)+`</div>
                                    </div>
                                </div>
                            </div>`;
                        }
                        $("#inspectionList").append(html);

                        jQuery(".all-inspect-list").click(function(data){
                            var id = $(this).attr("data-id");
                            app.router.navigate("/inspectionApplyRecords/"+id+"/");
                        });
                        
                    } else {
                        $("#inspectionTotal").html(0);
                    }
                });
            },

            // 获取查岗月度统计
            getInspectRecords: function() {
                var self = this;
                Dao.getInspectRecords({
                    orgIds: userInfor.organizationIds,
                    dateTime: self.searTime
                },function(data) {
                    if(data&&data.length>0) {
                        for (var i = 0; i < data.length; i++) {
                            var date = data[i].date;
                            var y,m,d;
                            y = date.toString().substring(0,4);
                            if(date.toString().substring(5,6) == '0') {
                                m = date.toString().substring(6,7);  
                            } else {
                                m = date.toString().substring(5,7);
                            }
                            if (date.toString().substring(8,9) == '0') {
                                d = date.toString().substring(9,10);
                            } else {
                                d = date.toString().substring(8,10);
                            }
                            var attrValue = y + '-' + (m - 1) + '-' + d;
                            // 结果：结果大于0查岗有异常情况，等于0表示查岗正常
                            var result = data[i].result;
                            if (result <= 0) {
                                $("#inspection-container").find(".calendar-row div[data-date='"+attrValue+"'] span").addClass("calendarDay normalColor");
                            } else {
                                $("#inspection-container").find(".calendar-row div[data-date='"+attrValue+"'] span").addClass("calendarDay abnormalColor");
                            }
                        }
                    } else {

                    }
                });
            }
        },
        on:{
            pageInit: function(e, page) {
                var self = this;
                self.createCalendar();
                self.getRecordData();
                self.getInspectRecords();
                $("#inspectionTitle").html(moment().format("YYYY-MM-DD")+"&nbsp;&nbsp;&nbsp;共查岗<span style='color:#397FCF;padding:0 8px;' id='inspectionTotal'>0</span>次");
                
            }
        }
    }
</script>

<style scoped>
    .inspectionApply-page-top  .abnormalColor:after {
        background: #e07762 !important;
    }
   
   .inspectionApply-page-top .normalColor:after {
      background: #69ba71 !important;
     }
    .icon-today {
        position: absolute;
        top: 20px;
    }
    .inspection-container .calendar-day.calendar-day-today span {
        background: rgba(225, 225, 225, 1);
        opacity: 0.5;
        border-radius: 50%;
        color: #000;
    }
    .inspection-container .calendar-day.calendar-day-today .icon-today {
        color: #000;
    }
    .inspection-container .calendar-day.calendar-day-selected .icon-today {
        color: #fff;
    }
    .inspection-container .calendar-day.calendar-day-selected span{
        background: #2196f3;
        color: #fff;
        opacity: 1;
    }
</style>